<template>
  <el-dialog v-model="visible" :width=" '50%' ">
    <el-table
        :data="tableData"
        border
        style="width: 100%"
        @row-dblclick="components_handleSelectHandleName"
        stripe
    >
      <el-table-column type="index" width="50"/>
      <el-table-column prop="handle_name" label="处理方名称"/>
      <el-table-column prop="mnemonic" label="助记码"/>
      <el-table-column prop="handle_group_name" label="所属分组"/>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[100, 200, 500]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total=" total "
    />
  </el-dialog>
</template>

<script setup lang="ts">

// 小类列表前端分页
import {ref, watch} from "vue";
import {HandleFuzzyList} from "@/api/first/FuzzySearch/type.ts";

const background = ref<boolean>(true)  // 是否带背景方框
const disabled = ref<boolean>(false)  // 是否可用
const small = ref<boolean>(false)  // 普通大小还是小一号
const currentPage = ref<number>(1)  // 当前所在页数
const pageSize = ref<number>(100)  // 一页有几条记录
const total = ref<number>(0) // 总条数
watch([currentPage, pageSize], () => {
  tableData = total_data.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
})
let tableData: HandleFuzzyList[] = []
let total_data: HandleFuzzyList[] = []


const visible = ref(false)



const components_handleSelectHandleName = (row: HandleFuzzyList) => {
  cmy('return_small', row)
  visible.value = false
}

const open = (data: HandleFuzzyList[]) => {
  visible.value = true
  total_data = data
  tableData = total_data.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
  total.value = total_data.length
}


defineExpose({open});
const cmy = defineEmits(["return_small"]);


</script>

<style scoped>

</style>